<template>
  <div class="my-goods-list">
		<MyTable :arr="list">
			<template #header>
					<th>#</th>
				<th>商品名称</th>
				<th>价格</th>
				<th>标签</th>
				<th>操作</th>
			</template>

			<template #body="scoped">

			
				<td>{{scoped.obj.id}}</td>
				<td>{{scoped.obj.goods_name}}</td>
				<td>{{scoped.obj.goods_price}}</td>
				<td>
					<div>
						<!-- 输入框 -->
						<input style="width: 150px" class="tag-input form-control" type="text" v-if="scoped.obj.inputVisible"
						v-model="scoped.obj.inputValue"
						v-focus @blur="scoped.obj.inputVisible=false" @keyup.esc="scoped.obj.inputValue=''" @keyup.enter="add(scoped.obj)"/>
						<button class="btn btn-primary btn-sm add-tag" v-else @click="scoped.obj.inputVisible=true">
							+Tag
						</button>
					</div>

		<span v-for="(item,index) in scoped.obj.tags" :key="index"
		
		class="badge bg-warning  text-dark">
			{{item}}
		</span>
				</td>
				<td><button class="btn btn-danger btn-sm" @click="del(scoped.obj.id)">删除</button></td>
		
			</template>
		</MyTable>
	</div>
</template>

<script>
// 接口：GTE  https://www.escook.cn/api/goods
import axios from "axios";
import MyTable from '@/components/MyTable.vue'
export default {
	components:{
		MyTable
	},
  data() {
    return {
      list: [],
    };
  },
  async created() {
    const { data: res } = await axios.get("https://www.escook.cn/api/goods");
			console.log(res)
			this.list=res.data
 },
 methods:{
	del(id){
		this.list=this.list.filter(item=>item.id!==id)
	},
	add(obj){
		if(obj.inputValue===''){
			return 
		}
		obj.tags.push(obj.inputValue)
		obj.inputValue=''
	}
 },
 directives:{
	focus:{
		inserted(el){
			el.focus()
		}
	}
 }
};
</script>

<style>
</style>
